<template>
	<el-row id="container">

		<!-- <el-col :span="24" id="outter_container"> -->
		<el-col :span="24" id="txtc">
			<div id="tcontainer">
				<i id="txicon"></i>
				<span id="txst">交易详情</span>
			</div>
		</el-col>

		<el-col :span="24" id="MEtxsinfo">
			<div class="MEtxsinfotable" v-for="d in tableData">
				<label class="MEtxkey">{{d.mkey[0]}}</label>
				</br>
				<label class="MEtxvalue" v-bind:class="textObject(d.mkey)" v-on:click="readdetail(d)">{{tshow(d)}}</label>
			</div>
		</el-col>
		<el-col :span="24" id="btn">
			<el-button type="primary" id="notebtn" @click="view_note">预览票据</el-button>
		</el-col>
		<!-- </el-col> -->

		<el-dialog :visible.sync="dialogVisible" width="90%" :before-close="handleClose" id="note_dialog" :fullscreen="true">
			<div id="print_container">
	            <MERetail v-if="show" :notedata="notedata"></MERetail>
	            <MECheckreport v-if="show1" :notedata="notedata"></MECheckreport>
	        </div>
		</el-dialog>

		<MEFooter class="f"></MEFooter>

	</el-row>
</template>

<script>

	import MEFooter from '../MEcomponents/MEfooter.vue'
	import MERetail from '../MEcomponents/MEretailnote.vue'
	import MECheckreport from '../MEcomponents/MEcheckreport.vue'
	import Commonjs from "../utils/common.js"

	export default {

		components: { 
			MEFooter, 
			MERetail, 
			MECheckreport
		},

		data () {
			return {
				dialogVisible: false,
				ctxdetail: "",
				cloadbus: false,
				tableData: [],
				show:false,
				show1:false,
				notedata: ""
			}
		},

		created () {
			eventBus.$on('txdetail',txsdetail => {
				if (txsdetail != ""  && txsdetail != undefined){
					this.cloadbus = true
					// window.addEventListener("beforeunload",()=>{
						window.localStorage.setItem("txdetail",JSON.stringify(txsdetail))
					// })
					this.ctxdetail = txsdetail
					this.settxdata(txsdetail.data)
				} else if (txsdetail === undefined) {
				}
			})
		},

		mounted () {
			if (this.cloadbus === false) {
				this.ctxdetail = JSON.parse(window.localStorage.getItem("txdetail"))
				this.settxdata(this.ctxdetail.data)
			}
			eventBus.$off('txdetail')
		},

		destroyed() {
			if(this.blocklist != "") {
				eventBus.$emit('blockdetail',this.blocklist)
			}
		},

		methods: {

			handleClose(done) {
				done()
			},

			textObject: function (d) {
				return {
					'text-highlight': d[0] === "所属区块：",
					'mtxex': d[0] === "交易ID：" || d[0] === "所属区块：" || d[0] === "交易凭证哈希："
				}
			},

			readdetail(d) {
				if(d.mkey[0].toString()==="所属区块：")
				{
					let param = {hash:d.mvalue[0].toString()}
					this.$api.post('blockchain/block', param, r => {
						this.blocklist = r
						this.$router.push(`/MEblocks/${JSON.stringify(r.data.hash)}`)
					})
				}
			},

			tshow (s) {
				var mv = s.mvalue[0];
				if (s.mkey[0] === "交易ID：" || s.mkey[0] === "所属区块：" || s.mkey[0] === "交易凭证哈希：") {
			        var re= '';
			        var length = mv.length;
			        for (var i = 0,j=1; i < length; i++,j++) {
			            if (j&&j % 44 == 0) {
			                re += ' \n ';
			            } else {
			                re += mv[i];
			            }
			        }
			        return re;
			    } else if (s.mkey[0] === "所属市场：") {
			    	var re= '';
			        var length = mv.length;
			        for (var i = 0,j=1; i < length; i++,j++) {
			            if (j&&j % 20 == 0) {
			                re += ' \n ';
			            } else {
			                re += mv[i];
			            }
			        }
			        return re;
			    } else {
			    	return mv;
			    }
		    },

			settxdata (txdetail){
				if (this.tableData.length != 0) {
					let e = this.tableData.length
					for (let i=1;i<=e;i++){
						this.tableData.pop()
					}
				}
				let temparray = []
				let temphash = {
					mkey:[],
					mvalue:[]
				}
				let tempData = []

				for( let p in txdetail) {
					temphash = {
						mkey:[],
						mvalue:[]
					}
					if (p==="blockNumber" 
						|| p==="number" 
						|| p==="source" 
						|| p==="mineTime"
						|| p==="totalPrice"){
							continue;
					}
					
					if (p==="time")
					{
						let date
						if(txdetail[p].toString().length===10)
						{
							date = new Date(txdetail[p] * 1000)
						} else {
							date = new Date(txdetail[p])
						}

						let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
						function paddNum(s) {
							s += ""
							return s.replace(/^(\d)$/,"0$1");
						}
						let h = paddNum(date.getHours());
						let m = paddNum(date.getMinutes());
						let s = paddNum(date.getSeconds());
						a = a + " " + h + ":" + m + ":" + s

						if (date.getHours() < 12) {
							a = a + " AM"
						} else {
							a = a + " PM"
						}

						temphash["mvalue"].push(a)
					} else if (p==="type") {
						let a

						switch (txdetail[p]) {
							case "RetailInfo": a="零售单"; temphash["mvalue"].push(a); break;
							case "SaleInfo" : a="销售单"; temphash["mvalue"].push(a); break;
							case "PurchaseInfo" : a="进货单"; temphash["mvalue"].push(a); break;
							case "ReceiveInfo" : a="收货单"; temphash["mvalue"].push(a); break;
							case "AccessCertificate" : a="准入证明"; temphash["mvalue"].push(a); break;
							case "Market" : a="市场检查表"; temphash["mvalue"].push(a); break;
							case "Gov" : a="日常检查表"; temphash["mvalue"].push(a); break;
							default: temphash["mvalue"].push(txdetail[p]); break;
						}
						
					} else if (p==="extra") {
						// console.log(txdetail[p]["marketName"]==="广州黄沙水产批发市场")
						if (txdetail[p]["marketName"] != undefined) {
							temphash["mvalue"].push(txdetail[p]["marketName"].toString())
						} else {
							temphash["mvalue"].push("")
						}
					} else {
						temphash["mvalue"].push(txdetail[p])
					}

					switch(p) {
						case "mark": p="交易单号："; break;
						case "type": p="交易类型："; break;
						case "txHash": p="交易ID："; break;
						case "time": p="时间："; break;
						case "blockHash": p="所属区块："; break;
						case "hash": p="交易凭证哈希："; break;
						case "extra": p="所属市场："; break;
					}

					temphash["mkey"].push(p)
					tempData.push(temphash)
					// this.tableData.push(temphash)
				}

				// for(let s = 0 in tempData.length-1) {
					// this.tableData.push(temphash)
					// let temp = ""
					// temp = this.tableData[0]
					this.tableData.push(tempData[3])
					this.tableData.push(tempData[4])
					this.tableData.push(tempData[0])
					this.tableData.push(tempData[5])
					this.tableData.push(tempData[1])
					this.tableData.push(tempData[6])
					this.tableData.push(tempData[2])
					// console.log(this.tableData)
					// this.tableData[3] = temp
					// s += 1
				// }
			},

			view_note() {

				let source = this.ctxdetail.data.source
				let hash = this.ctxdetail.data.hash
				let contentFileId = this.ctxdetail.data.extra.contentFileId
				let param = {
					source:source, 
					hash:hash, 
					contentFileId:contentFileId
				}

				this.$api.post('blockchain/bill', param, r => {
					// console.log(r.data)
					this.notedata = r
					this.dialogVisible = true
					if(this.ctxdetail.data.type==="Market" 
						|| this.ctxdetail.data.type==="Gov" 
						|| this.ctxdetail.data.type==="AccessCertificate") {
							this.show1 = true
					} else {
							this.show = true
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.f {
		position: fixed;  
    	bottom: 0;  
	}

	.el-button {
		border: 1px solid #1DB2BF; 
		color: #fff;
		width: 5rem;
		background-color: #1DB2BF;
	}

	#note_dialog>>>.el-dialog__headerbtn {
		/*top:0.7rem;*/
		font-size: 1rem;
	}

	#note_dialog>>>.el-dialog__header {
		padding: 0.7rem 0.4rem;
	}

	#btn {
		text-align: center;
		height: 2.8rem;
	}

	#notebtn {
		/*width: 80%;*/
		font-size: 0.37rem;
		height: 1rem;
		border-radius: 0.17rem;
	}

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		/*height: 13rem;*/
		width: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		background-color: rgb(248, 248, 248);
	}

	#outter_container {
		height: 17rem;
		margin-top: 0.3rem;
		overflow: hidden;
	}

	#txtc {
		/*height: 1rem;*/
		background-color: #fff;
		/*border-bottom: solid 0.01rem rgba(179,179,179,0.50);*/
		padding: 0 0.1rem;
	}

	#tcontainer {
		height: 1rem;
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	#txicon {
		float: left;
		width: 0.48rem;
		height: 0.48rem;
		/*margin:0 auto;*/
		margin-left: 0.05rem;
		/*margin-top: 0.25rem;*/
		position: relative;
		top: 50%;
		margin-top: -0.24rem;
		/*line-height: 1rem;*/
		background-image:url('../assets/icon_trade_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#txst {
		float: left;
		line-height: 1rem;
		font-size: 0.33rem;
		margin-left: 0.07rem;
	}

	#MEtxsinfo {
		/*height: 14rem;*/
		background-color: #fff;
		padding: 0 0.1rem;
	}

	.MEtxsinfotable {
		box-shadow: 0 0 0.02rem 0 rgba(179,179,179,0.50);
		width: 100%;
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
		display: inline-block;
		/*height: 3rem;*/
		/*background-color: #fff;*/
	}

	.MEtxkey {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.15rem;
		color: #262626;
	}

	.mtxex {
		/*display: block;*/
		font-size: 0.25rem;
		margin-top: -0.46rem;
		height: 0.87rem;
		line-height: 0.37rem;
	}

	.MEtxvalue {
		float: left;
		position: relative;
		margin-top: -0.56rem;
		height: 0.5rem;
		line-height: 0.5rem;
		margin-left: 0.25rem;
		font-size: 0.28rem;
		color: #737373;
	}

	.text-highlight {
		color: #1DB2BF;
		font-size: 0.25rem;
		margin-top: -0.46rem;
		height: 0.87rem;
		line-height: 0.37rem;
	}

	.mtxex {
		/*display: block;*/
		font-size: 0.25rem;
		margin-top: -0.46rem;
		height: 0.87rem;
		line-height: 0.37rem;
	}

</style>